<template>
	<view class="myapphead">
		<view class="logout">
			<view class="header">我的</view>
			<view class="name-phone">
				<img src="../../static/img/top_bg_image.png" alt="">
				<view class="title">{{userInfo.username}}</view>
			</view>
			<view class="logout-i">
				<view @click="logout">退出登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				userInfo: {
					username: '137****5566'
				}
			}
		},
		methods: {
			logout() {
				uni.showModal({
					title: '确认退出登录',
					content: '你确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							wx.setStorage({
								key: 'userinfo',
								data: '',
								success: function() {
									// console.log('存储成功');
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}
							});

						}
					}
				});

			}
		},
		mounted() {
			let taht = this
			try {
			  var value = wx.getStorageSync('userinfo');
			  // console.log(value); // 输出：value
			  taht.userInfo = value
			  if(!value){
			  				  uni.reLaunch({
			  				  	url: '/pages/login/login'
			  				  })
			  }
			} catch (e) {
			  // 处理错误
			  uni.reLaunch({
			  	url: '/pages/login/login'
			  })
			}
			
			// this.userInfo = ''
			// let taht = this
			// wx.getStorage({
			// 	key: 'userinfo',
			// 	success: function(res) {
			// 		console.log(res.data); // 输出：value
			// 		if (res.data) {
			// 			taht.userInfo = res.data
			// 		}
			// 	}
			// });
			// console.log(this.userInfo)
			// if (!this.userInfo.purePhoneNumber) {
			// 	uni.reLaunch({
			// 		url: '/pages/login/login'
			// 	})
			// }
		},
		onLoad() {
			console.log(this.userInfo)
		}
	}
</script>

<style lang="scss" scoped>
	.myapphead {
		width: 100%;
		height: calc(100vh - 50px);
		background-color: #F1F6FA;
		color: #333333;
		padding-top: 80rpx;

		.logout {
			background-image: url(../../static/img/my-bg.png);
			background-repeat: no-repeat;
			background-size: 100% auto;
			height: 100%;

			.header {
				padding: 15rpx 60rpx 0rpx;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 60px;
				height: 60px;
			}

			.name-phone {
				padding: 10rpx 60rpx;

				img {
					width: 120rpx;
					height: 120rpx;
					vertical-align: middle;
					margin-right: 30rpx;
					border-radius: 60rpx;
				}
			}

			.title {
				display: inline-block;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50px;

			}
		}

		.logout-i {
			padding: 25rpx 25rpx;

			view {
				padding: 0 25rpx;
				background-color: #ffffff;
				line-height: 100rpx;
				font-size: 32rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>